<template>
    <div>
        <Tables 
            :title ='title' 
            :butns = 'butns' 
            :field = 'field' 
            :tableData ='tableData' 
            :pageSize='pageSize' 
            :totalNum="total_num"
            :collectName = "collect_name" 
            :rankable ="true"
            :curPage ="cur_page" 
            :collectField='"id"'
            :clearSelectItems="selectedItems" 
            :tdWidth = "'max-width:250px'"
            @reset="reset"  @loadData ="loadData" 
            @sentSelectedItems="getSelectedItems"
            @sentEditData="getEditData"
            @rankData = "setData"
            @changePageSize = 'changePageSize'
        >
		</Tables>
        <addModal 
            @addEvent='addData'
            @editEvent='editData'
            @delEvent='delData' 
            :result='status' 
            :editData='edit_data' 
            :oper='type' 
            :errorMsg='errorMsg' 
            :selectedItems='selectedItems'
        >
        </addModal>
    </div>
</template>
<script>
    import Tables from 'components/common/Tables'
    import Modals from 'components/common/Modals'
    import defendService from 'services/defendService'
	import netService from 'services/netService'
    import PageData from 'libs/PageData'
	import ProtocolData from 'libs/ProtocolData'
    import addModal from './safeplot/addModal'
    export default {
		components:{
		    Tables,
            Modals,
            addModal       
	    },
        data() {
            return{
                title:this.$t('safeplot.navBtn1'),
                butns:[
                    {
                        type:'add',
                        name:this.$t('common.addBtn'),
                        event:'addEvent',
                        icon:'/static/img/add.png',
                        class:'add_btn',
                    },
                    {
                        type:'del',
                        name:this.$t('common.delBtn'),
                        event:'delEvent',
                        icon:'/static/img/delete.png',
                        class:'del_btn',
                    },
                    {
                        type:'edit',
                        name:this.$t('common.editBtn'),
                        event:'editEvent',
                        icon:'/static/img/modpic.png',
                        class:'edit_btn',
                    }
                ],
                field:[
                    {
                        type:'checkbox',
                    },
                    {
                        type:'rank',
                    },
                    {
                        type:'select',
                        label:this.$t('safeplot.plotTableTh2'),
                        name:'protocol_id',
                        requried:true, 
                    },
                    {
                        type:'select',
                        label:this.$t('safeplot.plotTableTh3'),
                        name:'src_ip',
                        requried:false, 
                    },
                    {
                        type:'select',
                        label:this.$t('safeplot.plotTableTh4'),
                        name:'dst_ip',
                        requried:false, 
                    },
                    {
                        type:'select',
                        label:this.$t('safeplot.plotTableTh5'),
                        name:'s_port',
                        requried:false,
                        ellipsis:'max-width:80px;',  
                    },
                    {
                        type:'select',
                        label:this.$t('safeplot.plotTableTh6'),
                        name:'d_port',
                        requried:false, 
                        ellipsis:'max-width:80px;', 
                    },
                    {
                        type:'select',
                        label:this.$t('safeplot.plotTableTh7'),
                        name:'action',
                        requried:true, 
                    },
                    {
                        type:'select',
                        label:this.$t('safeplot.plotTableTh8'),
                        name:'description',
                        requried:false, 
                    },
                    
                ],
                tableData:[],
                pageSize:[10, 20, 40, 80],
                total_num:1,
                cur_page:1,
                collect_field:'id',              
                size: 10,
                collect_name:'id',              
                select_item:[],
                status:"",
                errorMsg:'',
                type:'',
                selectedItems:[],
                edit_data:{},
				momal_notice:'',
                oper:'',
                order: '',
                by: ''
            }
        },
        created() {
            this.loadData()
        },
        methods:{
            getSelectedItems(selectedItems) {
                this.selectedItems = selectedItems
            },
            getEditData(editdata) {
                this.edit_data = editdata 
            },
            getErrorMsg(msg) {
                this.errorMsg = msg
            },
            reset(type) {
                this.status = ""
                this.errorMsg = ''
                this.type = type  
                $('.inputs_wrap .error_foramt').removeClass('error_foramt')
            }, 
            changePageSize (nowpage, size) {
                this.cur_page = nowpage
                this.size = size
                this.loadData()
            }, 
            loadData() {
                let params = {
                    page: this.cur_page,
                    row: this.size,
                    order: this.order,
                    by: this.by
                }
				this.status = "ing"
                defendService.getSafePolt(1, params)
                .then((res) => {
					
					if (res.errcode === 0) {               
                        this.status = "ok"
                        this.tableData = res['1'].data.map((item) => {
                            item.protocol_id = ProtocolData.value(item.protocol_id)
                            item.action = item.action==0?this.$t('safeplot.allow'):this.$t('safeplot.refuse')
                            return item
                        })
						this.total_num = res['1'].count
                    } else {
                        this.status = 'error'
                        this.errorMsg = res.errorMessage	
                    }
				})
            },
            setData(param) {
                this.order = param.order
                this.by = param.by
                this.loadData()
            },
            addData (data) {
                defendService.addSafePolt(1, data)
                .then((res) =>{
                    if (res.errcode === 0) {
                        this.loadData()
                    }
                })
            },
            editData (data) {
                defendService.editSafePolt(1, data)
                .then((res) =>{
                    if (res.errcode === 0) {
                        this.loadData()
                    }
                })
            },
            delData (data) {
              defendService.delSafePolt(1, data)
                .then((res) =>{
                    if (res.errcode === 0) {
                        this.loadData()
                        this.selectedItems = []
                    }
                })  
            }
        }
    }
</script>